<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="commonJS::commonJsCss('收费明细查询')">
    <title>收费明细查询</title>
</head>
<body ng-app="chargeDetailApp" ng-controller="chargeDetailCtrl" ng-init="init()">
<div id="otherprint" style="height: 100%">
    <!--通用头部-->
    <div th:replace="head::header" ></div>
    <div th:replace="menu::menu" ></div>
    <div style="height: 91%">
        <div class="form-query">
            <table class="div_form_table">
                <tr>
                    <td class="div_form_middle_title" style="text-align: left;">
                        开始日期：
                        <input id="startDate" name="startDate" size="25" type="text" class="Wdate"
                               onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'endDate\')}',onpicked:function(){$(this).trigger('change')}})"
                               data-ng-model="startDate" readonly/>
                        结束日期：
                        <input id="endDate" name="endDate" size="25" type="text" class="Wdate"
                               onclick="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'startDate\')}',onpicked:function(){$(this).trigger('change')}})"
                               data-ng-model="endDate" readonly/>
                        合同用户：
                        <select id="contractUserSel" style="width: 150px;height: 30px;">
                            <option value=""><--请选择&ndash;&gt;</option>
                            <option th:each="contractUser : ${contractUserList}" th:value="${contractUser.contractUserId}" th:text="${contractUser.userAbbrev}" />
                        </select>

                        <button class="form-btn-edit" data-ng-click="findChargeDetail()">查询</button>
                        <button class="form-btn-insert" data-ng-click="printFile()">打印</button>
                        <button class="form-btn-insert" data-ng-click="exportFile()">导出</button>
                        <button class="form-btn-insert" data-ng-click="toDetailModal()">明细</button>
                    </td>
                </tr>
            </table>
        </div>

        <div class="form-table" style="width: 88%;min-height: 605px;height: 93%">
            <!--表格+条件查询+关联+分页-->
            <div class="billingrule_table_div">
                <div class="form-table" style="margin: 3px;">
                    <!--表格加分页：inline-block使分页在表格下-->
                    <div class="page-in-table">
                        <!--表格-->
                        <table class="efbtable" style="margin-bottom: -6px;">
                            <thead id="printhead1">
                            <tr>
                                <th class="efbth" style="width: 300px;">日期</th>
                                <th class="efbth" style="width: 500px;">舱单数据服务航班数</th>
                                <th class="efbth">旅客名单服务航班数</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="page-in-table" style="max-height: 700px;overflow-y:auto;">
                        <!--表格-->
                        <table class="efbtable">
                            <tbody id="printpart">
                            <tr data-ng-repeat="chargeDetail in chargeDetails">
                                <td class="efbTable-border" style="width: 300px;">
                                    <span>{{chargeDetail.date }}</span>
                                </td>
                                <td class="efbTable-border" style="width: 500px;">
                                    <span>{{chargeDetail.loadsheetNum }}</span>
                                </td>
                                <td class="efbTable-border">
                                    <span>{{chargeDetail.passgerListNum }}</span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!--外部容器的DIV随着内部DIV增多而增加高度-->
            <div style="clear:both;"></div>
        </div>

        <!--<div class="modal fade" tabindex="-1" role="dialog" id="choseFileFormatModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header modal-header-efb">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title modal-title-efb">提示</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row-fluid">
                            <div class="span12">
                                <table class="div_form_table">
                                    <tr>
                                        <td class="div_form_middle_title">
                                            请选择导出格式
                                            &nbsp;&nbsp;:&nbsp;&nbsp;
                                        </td>
                                        <td class="div_form_middle_other">
                                            <input type="radio" name="fileFormat" value="1" style="width: 40px;" checked/>Word格式
                                            <input type="radio" name="fileFormat" value="2" style="width: 40px;"/>PDF格式
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer modal-footer-efb">
                        <button type="button" class="form-btn-edit" data-ng-click="exportFile()">确定</button>
                        <button type="button" class="form-btn-cancel" data-ng-click="closeChoseFileFormatModal()">取消</button>
                    </div>
                </div>
            </div>
        </div>-->

        <!--明细-->
        <div class="modal fade" tabindex="-1" role="dialog" id="detailModal">
            <div class="modal-dialog" role="document" style="width: 1150px;">
                <div class="modal-content">
                    <div class="modal-header modal-header-efb">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title modal-title-efb">账单明细表</h4>
                    </div>
                    <div style="text-align: right;margin: 8px 10px;">
                        <button class="form-btn-insert" data-ng-click="printDetailFile()">打印</button>
                        <button class="form-btn-insert" data-ng-click="exportDetailExcel()">导出</button>
                    </div>
                    <div class="modal-body">
                        <div class="page-in-table">
                            <!--表格-->
                            <table class="efbtable" style="margin-bottom: -5px;">
                                <thead id="printhead2">
                                <tr>
                                    <th class="efbth" style="width: 100px;">日期</th>
                                    <th class="efbth" style="width: 80px;">航空公司</th>
                                    <th class="efbth" style="width: 60px;">类别</th>
                                    <th class="efbth" style="width: 80px;">航班号</th>
                                    <th class="efbth" style="width: 90px;">起落机场</th>
                                    <th class="efbth" style="width: 80px;">机尾号</th>
                                    <th class="efbth" style="width: 180px;">发送时间</th>
                                    <th class="efbth" style="width: 80px;">状态</th>
                                    <th class="efbth" style="width: 80px;">回复</th>
                                    <th class="efbth" style="width: 80px;">确认</th>
                                    <th class="efbth" style="width: 80px;">发送人</th>
                                    <th class="efbth" style="min-width: 40px">重发</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="page-in-table" style="max-height: 520px;overflow-y:auto;">
                            <table class="efbtable">
                                <tbody id="printdetailpart">
                                <tr data-ng-repeat="scUpDataEntityObject in scUpDataEntityVOList">
                                    <td class="efbTable-border" style="width: 100px;">
                                        <span>{{scUpDataEntityObject.createTimeStr }}</span>
                                    </td>
                                    <td class="efbTable-border" style="width: 80px;">
                                        <span>{{scUpDataEntityObject.chsShortname }}</span>
                                    </td>
                                    <td class="efbTable-border" style="width: 60px;">
                                        <span>{{scUpDataEntityObject.type }}</span>
                                    </td>
                                    <td class="efbTable-border" style="width: 80px;">
                                        <span>{{scUpDataEntityObject.fi }}</span>
                                    </td>
                                    <td class="efbTable-border" style="width: 90px;">
                                        <span>{{scUpDataEntityObject.tkoAndDesStr }}</span>
                                    </td>
                                    <td class="efbTable-border" style="width: 80px;">
                                        <span>{{scUpDataEntityObject.an }}</span>
                                    </td>
                                    <td class="efbTable-border" style="width: 180px;">
                                        <span>{{scUpDataEntityObject.sendTimeStr }}</span>
                                    </td>
                                    <td class="efbTable-border" style="width: 80px;">
                                        <span>{{scUpDataEntityObject.stateStr }}</span>
                                    </td>
                                    <td class="efbTable-border" style="width: 80px;">
                                        <span>{{scUpDataEntityObject.lastAutoAckStateStr }}</span>
                                    </td>
                                    <td class="efbTable-border" style="width: 80px;">
                                        <span>{{scUpDataEntityObject.lastManuAckStateStr }}</span>
                                    </td>
                                    <td class="efbTable-border" style="width: 80px;">
                                        <span>{{scUpDataEntityObject.pb_NAME }}</span>
                                    </td>
                                    <td class="efbTable-border" style="min-width: 40px">
                                        <span>{{scUpDataEntityObject.repect }}</span>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer modal-footer-efb">
                        <button type="button" class="form-btn-cancel" data-ng-click="closeDetailModal()">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--通用尾部-->
    <div th:replace="footer::footer" ></div>
</div>

<div id="printshow" style="height: 100%;display: none">
    <table class="efbtable printTable" style="margin-bottom: -6px;">
        <thead id="printhead">

        </thead>
        <tbody id="printdata">

        </tbody>
    </table>
</div>
</body>
<script type="text/javascript" th:src="@{/js/chargeDetail/ChargeDetailModule.js}"></script>
<script type="text/javascript" th:src="@{/js/common/cookieUtil.js}"></script>
<script type="text/javascript" th:src="@{/js/chargeDetail/ChargeDetailService.js}"></script>
<script type="text/javascript" th:src="@{/js/chargeDetail/ChargeDetailController.js}"></script>
<!--时间插件-->
<script type="text/javascript" th:src="@{/js/My97DatePicker/WdatePicker.js}" charset="UTF-8"></script>
<script th:inline="javascript">
    var type = [[${contractUserList}]];
    if(type.length==1){
        $("#contractUserSel").val(type[0].contractUserId);
    }

    function printTable (ro){

        var row = 35;
        if(ro != undefined){
            row=ro;
        }
        document.getElementById("otherprint").style.display = "none";
        var $tbl = $('table.printTable');
        var $tbody = $tbl.find('tbody');
        var $tbodyTr = $tbody.children();
        //清空tbody
        $tbody.children().remove();
        //再获取整个表格(此时的表格tbody已经没东西了,这样解释是不是有点啰嗦了?)
        $tbl = $('table.printTable');
        //创建一个文档碎片(这里没有用文档碎片了,jQuery操作字符串更简单)
        var fragment = '';
        //给表格加18行tr(主体内容)
        tbodyTrlength = $tbodyTr.length;
        var trFG = '';
        for (var i = 0 ; i < tbodyTrlength; i++) {
            trFG += $tbodyTr.eq(i)[0].outerHTML;
            if ((i + 1) % row == 0) {
                var clonetbl = $tbl.clone();  //克隆一个表格
                clonetbl.find("tbody").append(trFG);//在表格的body中加入内容
                fragment += "<div style='height: 100%' >"+clonetbl[0].outerHTML + "</div>";               //把表格加入文档碎片中
                trFG = '';
            }
        }
        var clonetbl = $tbl.clone();  //克隆一个表格
        clonetbl.find("tbody").append(trFG);//在表格的body中加入内容
        fragment +="<div style='height: 100%' >"+ clonetbl[0].outerHTML + "</div>";               //把表格加入文档碎片中
        trFG = '';
        $tbl.before(fragment);
        $tbl.remove();
        document.getElementById("printshow").style.display = "block";
        window.print();
        //打印结束后，放开隐藏内容
        document.getElementById("otherprint").style.display = "block";
        document.getElementById("printshow").style.display = "none";
    }
</script>
</html>